﻿<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>物理视图绑定逻辑应用</title>
		<link rel="stylesheet" href="../css/css.css">
		<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
		<link type="text/css" rel="Stylesheet" href="../css/sitemap.css" />
		<link type="text/css" rel="Stylesheet" href="../css/acstyle.css" />
		<script type="text/javascript" src="../js/jquery-1.7.1.min.js"></script>
		<script type="text/javascript" src="../js/messagecenter.js"></script>
		<script type="text/javascript" src="../js/common.js"></script>
		<script type="text/javascript" src="../js/data5.js"></script>
		<script type="text/javascript" src="../js/canvas4.js"></script>
		<style type="text/css">
		.app_text{
		  color:#04A0E9;
		}
		.page-split input{
			display:inline;	
			margin:0px 4px;
		}
		.text_color{
			color:#A6A6A6;
			text-align: left;
			text-indent: 20px;
		}
		.r-text{
			font-size: 13px;
			text-align: center;
			margin-top: 10px;
		}
		.cell{
			background-color:#FFFFFF !important;
		}
	</style>
		<script>
            window.onload = function() {
                var canvasData = {x:320 , y:60, width:Math.ceil(window.innerWidth-325)-95, height:Math.ceil(window.innerHeight-152)-140};
                init_canvas(canvasData ,3,lineEvent1 , lineEvent2 ,lineEvent3,iconEvent4);//初始化
                addList();
                drawCircles();
            };
            function lineEvent1(){}
            function lineEvent2(){}
            function lineEvent3(){}
            function  iconEvent4(obj){
                alert("机箱");
                alert(JSON.stringify(obj));

            }
            /**加载数据*/
            function addList(){
                /*var url="all";
                var circlesData=[];
                params={};
                $.post(url,params,"JSON").done(function(data){
                    if(data){
                        circlesData=data;
                    }
                });
                */
                if(circlesData==null){
                    return false;
                }
                for(var i=0;i<circlesData[0].data.length;i++){
                    addCanvasLevel1(i+1,circlesData[0].data[i]);
                    for(var j=0;j<circlesData[0].data[i].boards.length;j++){
                        addCanvasLevel2(i ,j, circlesData[0].data[i].boards[j]);
                        for(var k=0;k<circlesData[0].data[i].boards[j].cpus.length;k++){
                            addCanvasLevel3(i ,j , k,circlesData[0].data[i].boards[j].cpus[k]);
                        }
                    }
                }

            }

		</script>
	</head>
	<body>
	<div class="left_content">
		<div class="left_block1">
			<div class="left_logo"></div>
			<div class="left_title">品牌数据库编辑器，高效工作，人性化交互</div>
			<div class="left_icons">
				<div class="left_icon1"></div>
				<div class="left_icon2"></div>
				<div class="left_icon3"></div>
			</div>
		</div>
		<div class="left_block2">
			<div class="left_menu">拓扑文件库</div>
			<div class="left_menu">逻辑预案库</div>
			<div class="left_menu">部署库</div>
			<div class="left_menu">监控</div>
			<div class="left_menu">其他</div>
		</div>
		<div class="left_block3">
			<div class="left_title">快捷管理机箱、板卡、芯片，提高工作效率便捷查找功能相关物理和逻辑链接，高效编辑请登陆BDE账号</div>
			<button class="login">登录</button>
		</div>
	</div>
	<div class="right_content" >
			<form id="form1">
					<input type="hidden" id="curId" name="curId">
					<!-- 头部 -->
					<div class="top-bar">	
						<div style="float:left;">物理视图绑定逻辑应用<br>
						<span  class="text_color"  style="font-size: 13px;">Physical&nbsp;view&nbsp;binding&nbsp;logic&nbsp;application</span></div>	
					</div>
					<!-- 右侧 -->
					<div class="right">
						<div class="r0 app_text">APP</div>
						<div class="addApp">
							<div  class="shadow r-pre"></div>
							<div class="r-text">添加应用</div>
						</div>

					</div>
					<!-- 左上 -->
					<div class="table-box" >

					</div>					 
				<!-- 底部 -->
				<div class="bottom">
					<div class="bottom-bar">
			          <div class="b1">预案库</div>
			          <div class="b2">Choose&nbsp;to&nbsp;library</div>
			          <div class="top_input b3">
			      			<button class="search" type="button">搜索</button>
							<input class="s_input" type="text" name="" placeholder="输入关键字搜索"/>
					  </div>
			        </div>
					<div class="headerTableDiv2">
						<table cellspacing="0" cellpadding="0" style="border-collapse:collapse;">
							<colgroup>
								<col width="25%">
								<col width="25%">
								<col width="25%">
								<col width="25%">
							</colgroup>
							<tr>
								<td><div>编号</div></td>
								<td><div>应用名称</div></td>
								<td><div>备注</div></td>
								<td><div>操作</div></td>
							</tr>
						</table>
					</div>
					<div class="contentTableDiv2">
						<table cellspacing="0" cellpadding="0" style="border-collapse: collapse;width:100%;">
							<colgroup>
								<col width="25%">
								<col width="25%">
								<col width="25%">
								<col width="25%">
							</colgroup>
							<tbody id="popTbody">
							<tr>
								<td>NO.1</td>
								<td class="app_text">OX8E_1</td>
								<td>33</td>
								<td class="app_text">选择</td>
							</tr>
							</tbody>
						</table>
					</div>
				</div>
			</form>
	</div>

	</body>
	<script type="text/javascript">
	
	$(function(){
		$(".search").on("click",function(){
			alert("搜索");
			$("#form1").attr({action:"${rc.getContextPath()}/search", method: "GET"}).submit();			
		});
	});


	function addDataPop(data){
		$("#popTbody").empty();
		var html = '';
		$.each(data,function(k,v){
			html += '<tr>';
			html += '<td>'+v.no+'</td>';
			html += '<td>'+v.name+'</td>';
			html += '<td>'+v.appId+'</td>';
			html += '<td>'+v.addr+'</td>';
			html += '</tr>';
		});
		$("#popTbody").append(html);
	}
	
	$(function(){
		/* var url = '';
		var param = {id:id};
		$.post(url,param,"JSON").done(function(data){
			if(data&&data.length>0){
				addDataPop(data)
			}
		}); */
		 var dataArr = [];
		for(i=1;i<=10;i++){
			var dataJson = {};
			dataJson.no = i;
			dataJson.name = "OX8E_"+i;
			dataJson.appId = i;
			dataJson.addr = "141";
			dataArr.push(dataJson);
		} 
		addDataPop(dataArr);
		$("#showInfo").show();
		tableSum();
	});
	function tableSum() {
		$(".contentTableDiv2").scrollTop(10);// 控制滚动条下移10px
		if ($(".contentTableDiv2").scrollTop() > 0) {
			var scrollWidth = getScrollbarWidth();
			$(".contentTableDiv2").css("right",(30-scrollWidth)+"px");
		} else {
			$(".contentTableDiv2 table").css("width", "100%");
		}
		$(".contentTableDiv2").scrollTop(0);// 滚动条返回顶部
	}
	$(function(){
		tableSum();
	});

	$(window).resize(function() {
		tableSum();
	});
	
	function getScrollbarWidth() {
	    var odiv = document.createElement('div'),//创建一个div
	        styles = {
	            width: '100px',
	            height: '100px',
	            overflowY: 'scroll'//让他有滚动条
	        }, i, scrollbarWidth;
	    for (i in styles) odiv.style[i] = styles[i];
	    document.body.appendChild(odiv);//把div添加到body中
	    scrollbarWidth = odiv.offsetWidth - odiv.clientWidth;//相减
	    odiv.remove();//移除创建的div
	    return scrollbarWidth;//返回滚动条宽度
	}

	$(function(){
		$(".connect").on("click",function(){
			alert("连接");
		});
	});  
	$(function(){
		$(".btn-s .save").on("click",function(){
			alert("保存");
			$("#form1").attr({action:"${rc.getContextPath()}/save", method: "POST"}).submit();			
		});
	});
	</script>
</html>
